<template>
  <!-- 大小额贷记往账手工处理明细页面弹出框 hvps.115.001.01-->
  <el-dialog
    title="大小额贷记往账手工处理明细"
    center
    :visible.sync="open"
    width="1024px"
    :close-on-click-modal="false"
    @close="closeFn"
  >
    <el-form ref="settingsForm" :model="formData.data" :rules="rules" label-width="165px">
      <el-card class="form-card payerInfo-card">
        <div slot="header" class="label-header-msg">
          <span>基本信息</span>
        </div>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="交易流水号：" prop="id">
              <el-input v-model="formData.data.id" placeholder="交易流水号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="CPG日期：" prop="cpgdate">
              <el-date-picker
                disabled
                v-model="formData.data.cpgdate"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工作日期：" prop="workdate">
              <el-date-picker
                disabled
                v-model="formData.data.workdate"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择日期"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="业务类型：" prop="bizTypeCode">
              <el-select v-model="formData.data.bizTypeCode" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  :label="`${formData.data.bizTypeCode}-${formData.data.bizTypeCodeDesc}`"
                  :value="formData.data.bizTypeCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="业务种类：" prop="bizCtgyCode">
              <el-select v-model="formData.data.bizCtgyCode" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  :label="`${formData.data.bizCtgyCode}-${formData.data.bizCtgyCodeDesc}`"
                  :value="formData.data.bizCtgyCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="业务优先级：" prop="bizPriority">
              <el-select v-model="formData.data.bizPriority" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  v-for="dict in dictMap.PRIORITY3CODE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源：" prop="source">
              <el-select v-model="formData.data.source" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  v-for="dict in dictMap.TXN_SOURCE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="记账标志：" prop="cbflag">
              <el-select v-model="formData.data.cbflag" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  v-for="dict in dictMap.CBFLAG"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card">
        <div slot="header" class="label-header-msg">
          <span>付款人信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人账号：" prop="payerActno">
              <el-input v-model="formData.data.payerActno" placeholder="付款人账号" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人名称：" prop="payerName">
              <el-input v-model="formData.data.payerName" placeholder="付款人名称" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款行行号：" prop="payerBrno">
              <el-input v-model="formData.data.payerBrno" placeholder="付款行行号" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款行行名：" prop="payerBrname">
              <el-input v-model="formData.data.payerBrname" placeholder="付款行行名" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="付款人开户行行号：" prop="payerAccBrno">
              <el-input v-model="formData.data.payerAccBrno" placeholder="付款人开户行行号" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="付款人开户行行名：" prop="payerAccBrname">
              <el-input v-model="formData.data.payerAccBrname" placeholder="付款人开户行行名" disabled />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <el-card class="form-card">
        <div slot="header" class="label-header-msg">
          <span>收款人信息</span>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人账号：" prop="payeeActno">
              <el-input v-model="formData.data.payeeActno" placeholder="收款人账号" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收款人名称：" prop="payeeName">
              <el-input v-model="formData.data.payeeName" placeholder="收款人名称" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="formData.data.bizTypeCode != 'A105'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="收款行行号(原)：" prop="payeeBrno">
                <el-input v-model="formData.data.payeeBrno" placeholder="收款行行号(原)" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收款行行名(原)：" prop="payeeBrname">
                <el-input v-model="formData.data.payeeBrname" placeholder="收款行行名(原)" disabled />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" :gutter="10">
            <el-col :span="12">
              <el-form-item label="收款行行号(修改)：" prop="payeeBrnoNew">
                <el-input v-model="formData.data.payeeBrnoNew" placeholder="收款行行号(修改)" />
              </el-form-item>
            </el-col>

            <el-col :span="2">
              <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('queryBankBtn3')">
                行名行号查询
              </el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收款行行名(修改)：" prop="payeeBrnonameNew">
                <el-input v-model="formData.data.payeeBrnonameNew" placeholder="收款行行名(修改)" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="formData.data.bizTypeCode == 'A105'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="收款行行号：" prop="payeeBrno">
                <el-input v-model="formData.data.payeeBrno" placeholder="收款行行号" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="收款行行名：" prop="payeeBrname">
                <el-input v-model="formData.data.payeeBrname" placeholder="收款行行名" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人开户行行号(原)：" prop="payeeAccBrno">
              <el-input v-model="formData.data.payeeAccBrno" placeholder="收款人开户行行号(原)" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款人开户行行名(原)：" prop="payeeAccBrname">
              <el-input v-model="formData.data.payeeAccBrname" placeholder="收款人开户行行名(原)" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <div v-if="formData.data.bizTypeCode != 'A105'">
          <el-row type="flex" :gutter="10">
            <el-col :span="12">
              <el-form-item label="收款人开户行行号(修改)：" prop="payeeAccBrnoNew">
                <el-input v-model="formData.data.payeeAccBrnoNew" placeholder="收款人开户行行号(修改)" />
              </el-form-item>
            </el-col>

            <el-col :span="2">
              <el-button icon="el-icon-search" plain type="primary" @click="openBankBranchDialog('queryBankBtn5')">
                行名行号查询
              </el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="收款人开户行行名(修改)：" prop="payeeAccBrnameNew">
                <el-input v-model="formData.data.payeeAccBrnameNew" placeholder="收款人开户行行名(修改)" disabled />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <el-card class="form-card">
        <div slot="header" class="label-header-msg">
          <span>交易信息</span>
        </div>
        <el-row type="flex">
          <el-col :span="12">
            <el-form-item label="交易货币：" prop="curcd">
              <el-input v-model="formData.data.curcd" placeholder="交易货币" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="金额：" prop="amount">
              <el-input v-model="formData.data.amount" placeholder="金额" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="附言：" prop="remarks">
              <el-input
                disabled
                type="textarea"
                v-model="formData.data.remarks"
                placeholder="附言"
                maxlength="256"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex">
          <el-col :span="18">
            <el-form-item label="non-stp类型：" prop="nstpType">
              <el-select v-model="formData.data.nstpType" placeholder="请选择" style="width: 100%" disabled>
                <el-option
                  v-for="dict in dictMap.NON_STP_TYPE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="non-STP原因：" prop="nstpRemarks">
              <el-input
                disabled
                type="textarea"
                v-model="formData.data.nstpRemarks"
                placeholder="non-STP原因"
                maxlength="256"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="formData.data.bizTypeCode == 'A105'">
          <el-col :span="24">
            <el-form-item label="退汇原因：" prop="reason">
              <el-input
                type="textarea"
                v-model="formData.data.reason"
                placeholder="退汇原因"
                maxlength="256"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="formData.data.bizTypeCode != 'A105'" @click="updateFn" :loading="isLoading">
        修改
      </el-button>
      <el-button type="warning" @click="rejectFn" :loading="isLoading">拒绝</el-button>
      <el-button type="warning" @click="forceSendFn" :loading="isLoading">强制发送</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
    <!-- 行号行名查询 -->
    <bank-branch-dialog ref="bankBranchDialog" @confirm="confirmBankBranch"></bank-branch-dialog>
  </el-dialog>
</template>
<script>
import { save6901, deleteUrl, send6901 } from "@/api/cnaps/beps/baseHandWork/hvpsBepsCreditVostroHdWk";
import { log } from "util";
import BankBranchDialog from "@/views/components/BankBranchDialog";
import { getBankInfByBankCode } from "@/api/cnaps/common/bankInfo";
export default {
  name: "NostroSetting112",
  components: { BankBranchDialog },
  props: {
    dictMap: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    // 表单校验
    let checkBrnoRule = (rule, value, callback) => {
      if (value) {
        getBankInfByBankCode(this.formData.data.payeeBrnoNew)
          .then((res) => {
            if (res.code == "S" && res.result !== null) {
              this.$set(this.formData.data, "payeeBrnoNew", res.result.bankCode);
              this.$set(this.formData.data, "payeeBrnonameNew", res.result.orgFullname);
              callback();
            } else {
              this.msgError("收款行行号(修改)：找不到对应的行号");
              this.$set(this.formData.data, "payeeBrnonameNew", null);
            }
          })
          .catch((err) => {
            this.msgError("收款行行号(修改)：找不到对应的行号");
            this.$set(this.formData.data, "payeeBrnonameNew", null);
          });
      }else{
        callback(new Error("请选择正确的行号"));
      }
    };
    let checkAccBrnoRule = (rule, value, callback) => {
      if (value) {
        getBankInfByBankCode(this.formData.data.payeeAccBrnoNew)
          .then((res) => {
            if (res.code == "S" && res.result !== null) {
              this.$set(this.formData.data, "payeeAccBrnoNew", res.result.bankCode);
              this.$set(this.formData.data, "payeeAccBrnameNew", res.result.orgFullname);
              callback();
            } else {
              this.msgError("收款人开户行行号(修改)：找不到对应的行号");
              this.$set(this.formData.data, "payeeAccBrnameNew", null);
            }
          })
          .catch((err) => {
            this.msgError("收款人开户行行号(修改)：找不到对应的行号");
            this.$set(this.formData.data, "payeeAccBrnameNew", null);
          });
      }else{
        callback(new Error("请选择正确的行号"));
      }
    };
    return {
      isControl: false,
      // 是否显示弹出层
      open: false,
      isLoading: false,
      rules: {
        payeeBrnoNew: [
          {
            message: "请选择正确的行号",
            trigger: "blur",
            validator: checkBrnoRule,
          },
        ],
        payeeAccBrnoNew: [
          {
            message: "请选择正确的行号",
            trigger: "blur",
            validator: checkAccBrnoRule,
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    //行名行号返回
    confirmBankBranch(fromFlag, row) {
      console.log("row", row);
      if (fromFlag == "queryBankBtn3") {
        this.$set(this.formData.data, "payeeBrnoNew", row.bankCode);
        this.$set(this.formData.data, "payeeBrnonameNew", row.orgFullname);
      }
      if (fromFlag == "queryBankBtn5") {
        this.$set(this.formData.data, "payeeAccBrnoNew", row.bankCode);
        this.$set(this.formData.data, "payeeAccBrnameNew", row.orgFullname);
      }
    },
    //行名行号查询
    openBankBranchDialog(fromFlag = "") {
      this.$refs.bankBranchDialog.show(fromFlag);
    },
    // 表单重置
    reset() {
      this.resetForm("settingsForm");
      // this.$set(this, "form", {});
    },
    closeFn() {
      this.open = false;
    },
    show() {
      this.open = true;
    },
    // 修改
    updateFn() {
      this.$refs["settingsForm"].validate((valid) => {
        if (valid) {
          // if (this.formData.data.nstpType != "97") {
          //   this.msgWarning("non-stp类型:非97-必验性校验错误, 不能修改");
          //   return;
          // }
          if (
            this.formData.data.payeeBrnoNew == "" &&
            this.formData.data.payeeActnoNew == "" &&
            this.formData.data.payeeNameNew == ""
          ) {
            this.msgWarning("修改内容输入为空");
            return;
          }

          if (
            this.formData.data.payeeBrnoNew == this.formData.data.payeeBrno &&
            this.formData.data.payeeActnoNew == this.formData.data.payeeActno &&
            this.formData.data.payeeNameNew == this.formData.data.payeeName
          ) {
            this.msgWarning("修改后内容与修改前一致,请重新修改");
            return;
          }

          if (this.formData.data.payeeBrnoNew == this.formData.data.payeeBrno) {
            this.msgWarning("修改后内容与修改前一致,请重新修改");
            return;
          }
          if (this.formData.data.payeeActnoNew == this.formData.data.payeeActno) {
            this.msgWarning("修改后内容与修改前一致,请重新修改");
            return;
          }

          if (this.formData.data.payeeNameNew == this.formData.data.payeeName) {
            this.msgWarning("修改后内容与修改前一致,请重新修改");
            return;
          }

          this.$confirm("是否选择提交？", "系统提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            this.$set(this.formData.data, "optType", "04");
            save6901(this.formData.data).then((res) => {
              this.msgSuccess("操作成功！");
              this.open = false;
              this.$emit("editComplete", true);
            });
          });
        }
      });
    },
    // 拒绝
    rejectFn() {
      this.$confirm("是否确认拒绝？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        // this.$set(this.formData.data, "optType", "06");
        deleteUrl(this.formData.data.id).then((res) => {
          this.msgSuccess("操作成功！");
          this.open = false;
          this.$emit("editComplete", true);
        });
      });
    },
    // 强制发送
    forceSendFn() {
      if (this.formData.data.nstpType == "97") {
        this.msgWarning("non-stp类型:97-必验性校验错误，不能强制发送");
        return;
      }
      this.$confirm("是否确认强制发送？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$set(this.formData.data, "optType", "02");
        send6901(this.formData.data).then((res) => {
          this.msgSuccess("操作成功！");
          this.open = false;
          this.$emit("editComplete", true);
        });
      });
    },
    cancel() {
      this.open = false;
      this.reset();
    },
  },
};
</script>
<style lang="scss" scoped>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
